<template>
    <div class="login">
    	
           	<div style="font-size: 0;">
	       		<img v-for="item,index in imgArr" :key="index" :style="styleimg" :src="item" alt="" />
	       	</div>  
	        <span style="position: fixed;right: 7%;top: 49%;">
	        	<div v-for="item,index in imgArr" v-bind:class="[bannerActive == index+1?activeclass:'']" @click="turnTo(index)" style="cursor: pointer;border-radius: 15px;width: 15px;height: 15px;border: 1px solid white;margin-top: 10px;"><!--{{index+1}}--></div>
	        </span>     
    	<transition name="custom-classes-transition" enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft" >
        	<div v-if="loginShow" style="position: absolute;right:17%;top:50%;margin-top:-200px;width: 360px;height: 400px;-moz-box-shadow:-1px 1px 10px #DBDBDB;background-color: white;border-radius: 5px;">
        			<!--<Tabs v-model="role" style="font-size:24px;">
				        <TabPane label="登录" name="teacher"></TabPane>
				    </Tabs>-->
				    <Spin size="large" fix v-if="loginshow"></Spin>
				    <div style="font-size: 20px;margin-top: 50px;margin-left: 40px;">
				    	登录
				    </div>
				    <input v-model="username"  size="large" placeholder="请输入账号" style="margin-top: 45px;margin-left: 40px;width: 280px;height:40px;border: 0;border-bottom: 1px solid rgba(240,240,240,1);border-radius: 0px;"></input>
				    <input @keyup.enter="dologin" v-model="password"  size="large" type="password"  placeholder="请输入密码" style="width: 280px;margin-left: 40px;height:40px;margin-top: 35px;border: 0;border-bottom: 1px solid rgba(240,240,240,1);border-radius: 0px;"></input>
				    <div style="width: 320px;text-align: right;margin-top: 18px;">
				    	<span>忘记密码?</span>
				    </div>
				    <Button size="large" type="primary" @click="dologin"  style="margin-top:25px;margin-left: 40px;width: 280px;height: 40px;">登录</Button>
        	</div>
        </transition>
        <div>
        	<img class="hoverclass" src="http://www.hengyiyun.com/imagefront/phone/contact.png"/>
        </div>
    </div>
</template>

<script>
	import md5 from 'md5'
	import api from "@/components/js/Apidomain.js"
	import { setlocalstorage,setsessionstorage } from "@/components/js/Localstorage.js"
    import { mapMutations } from 'vuex'
    import axios from 'axios'
    export default {
        data() {
            return {
            	loginshow:false,
//          	role:"teacher",
            	username:"",
            	password:"",
            	
            	loginShow:true,
            	bannerActive:1,
				imgArr:[
					"http://www.hengyiyun.com/imagefront/login/index_banner_01.jpg",
					"http://www.hengyiyun.com/imagefront/login/index_banner_02.jpg",
					"http://www.hengyiyun.com/imagefront/login/index_banner_03.jpg",
					"http://www.hengyiyun.com/imagefront/login/index_banner_04.jpg",
					"http://www.hengyiyun.com/imagefront/login/index_banner_05.jpg",
					"http://www.hengyiyun.com/imagefront/login/index_banner_06.jpg",
				],
				
            }
        },
      	computed:{
        	activeclass: function() {
				return 'active'
			},
			styleimg: function() {
                return {
                    width: "100%",
                    height: document.documentElement.clientHeight + "px",
                }
            },
		},
		mounted(){
	        window.addEventListener('scroll',this.scroll)
      	},
        methods: {
            ...mapMutations([
                'SAVE_ROLE','SAVE_ROLE_INFO'
            ]),
            dologin: function() {
            	if(this.username == ""){
					this.$Message.error({
								content: '请输入用户名',
								duration: 10,
								closable: true
							});
					return; 
				}
            	if(this.password == ""){
					this.$Message.error({
								content: '请输入密码',
								duration: 10,
								closable: true
							});
					return; 
				}
            	this.loginshow = true;
				var self = this;
            	let url = api.apidomain+'/tqes/web/login/check';
            	this.$http.post(url, {
						"loginId": this.username,
						"loginPwd": this.password,
//						"loginPwd": md5(this.password)
					})
					.then(function(response) {
						////console.log(response.data.data)
						if(response.data.success == true){
//							//console.log(response.data.data.Authorization)
							setsessionstorage('authorization',response.data.data.Authorization);
							setsessionstorage('roleinfo',JSON.stringify(response.data.data.topMenuInfo));
							setsessionstorage('toolBarMenuInfo',JSON.stringify(response.data.data.toolBarMenuInfo));
							setsessionstorage('schoolName',response.data.data.schoolName);
							setsessionstorage('menuContainChild',JSON.stringify(response.data.data.menuContainChild));
							
							if(response.data.data.toolBarMenuInfo.length != 0){
								setsessionstorage('moduleListActiveValue',response.data.data.toolBarMenuInfo[0].value);
							}
							setsessionstorage('settingBarMenuInfo',JSON.stringify(response.data.data.settingBarMenuInfo));
							setsessionstorage('roleid',response.data.data.sysRole.roleId);
							setsessionstorage('role',response.data.data.sysRole.roleName);
							setsessionstorage('userRoleList',JSON.stringify(response.data.data.userRoleList));
							
							setsessionstorage('username',response.data.data.userName);
							self.$Message.success('登录成功');
							//console.log(response.data.data.firstChildMenuPath)
							if(response.data.data.firstChildMenuPath == ""){
								self.$router.push("/indexshow")
							}else{
								self.$router.push(response.data.data.firstChildMenuPath)
							}
							self.loginshow = false;
		            	}else if(response.data.success == false){
//		            		//console.log(response.data.msg)
							self.loginshow = false;
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            	}
					})
					.catch(function(error) {
						self.loginshow = false;
						self.$Message.error({
							content: '系统发生错误：错误码00275',
							duration: 10,
							closable: true
						});
					});
           },
           
           
           
           	turnTo:function(index){
        		this.bannerActive = index + 1;
        		let clintHigh = parseInt(document.documentElement.clientHeight + "px");
        		this.scrollToLocation(clintHigh*index)
        	},
			scrollToLocation:function(y){
				//当前的y坐标位置
				var add = window.scrollY;		//100
				//目标y轴
				var destination = y;
				var addRange = y - window.scrollY;		//
				var time = 1;
				if(addRange > 0){
					for(let i = add;i<destination;i=i+10 ){
						++time
						setTimeout(function(){
							window.scrollTo(0,i+10);
						},time*1)
					}
					time = 1;
				}else{
					for(let i = add;i>destination;i=i-10 ){
						++time
						setTimeout(function(){
							window.scrollTo(0,i-10);
						},time*1)
					}
					time = 1
				}
			},
			scroll:function(){
				if(window.scrollY > document.documentElement.clientHeight/3){
					this.loginShow = false;
				}else{
					this.loginShow = true;
				}
	          	this.bannerActive = Math.round(window.scrollY/document.documentElement.clientHeight)+1;
	        }
        },
        computed: {
            activeclass: function() {
				return 'active'
			},
			styleimg: function() {
                return {
                    width: "100%",
                    height: document.documentElement.clientHeight + "px",
                }
            },
        }
    }
</script>

<style lang="css" scoped>
.login >>> .active{
		background-color: white;
		/*color: white;*/
	}
.login >>> .ivu-form-inline .ivu-form-item{
	width:215px;
}
.login >>> .ivu-tabs-nav-container{
    font-size: 18px
}
.login >>> input{
         /* placeholder颜色  */
         color: black;
         /* placeholder字体大小  */
         font-size: 17px;
         /* placeholder位置  */
         text-align: left;
          -webkit-box-shadow:none; 
   -webkit-text-fill-color: none;
     }
.login >>> input::-webkit-input-placeholder {
         /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
         font-size: 16px;
         /* placeholder位置  */
         text-align: left;
     }
.login >>> input:focus
{ 
	/*去掉点击选中时会有蓝色边框*/
	outline: none;
	border-bottom: 1px solid red;
}
.hoverclass{
	position: fixed;
	top: 80%;
	right: -173px;
	transition:all 0.5s;
}
.login >>> .hoverclass:hover{
		right: 0px;
		
}
</style>